<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.66">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <link rel="icon" href="https://cdn.pixabay.com/animation/2022/08/05/07/12/07-12-14-597_512.gif"><title>三剑客 | PERSIST</title><meta name="description" content="三剑客、Vue、React、...">
    <link rel="preload" href="/blogs/assets/style-3126903c.css" as="style"><link rel="stylesheet" href="/blogs/assets/style-3126903c.css">
    <link rel="modulepreload" href="/blogs/assets/app-5598dde8.js"><link rel="modulepreload" href="/blogs/assets/base.html-84d926c4.js"><link rel="modulepreload" href="/blogs/assets/base.html-15ef8c21.js"><link rel="prefetch" href="/blogs/assets/index.html-d9b814f4.js" as="script"><link rel="prefetch" href="/blogs/assets/css.html-38c59cab.js" as="script"><link rel="prefetch" href="/blogs/assets/css3.html-28b2b602.js" as="script"><link rel="prefetch" href="/blogs/assets/html.html-fda41b1c.js" as="script"><link rel="prefetch" href="/blogs/assets/html5.html-b423fb46.js" as="script"><link rel="prefetch" href="/blogs/assets/JavaScript.html-ea762ff0.js" as="script"><link rel="prefetch" href="/blogs/assets/TypeScript.html-8e165f09.js" as="script"><link rel="prefetch" href="/blogs/assets/bigscreen.html-5524caa6.js" as="script"><link rel="prefetch" href="/blogs/assets/react.html-8bfc6f05.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-02246930.js" as="script"><link rel="prefetch" href="/blogs/assets/vue.html-241f215e.js" as="script"><link rel="prefetch" href="/blogs/assets/handbook.html-6cbaa868.js" as="script"><link rel="prefetch" href="/blogs/assets/React.html-418e631e.js" as="script"><link rel="prefetch" href="/blogs/assets/ReactRouter.html-7e5f06ff.js" as="script"><link rel="prefetch" href="/blogs/assets/Redux.html-5560e17c.js" as="script"><link rel="prefetch" href="/blogs/assets/StudyTutorial.html-b823f3d9.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-f94e0631.js" as="script"><link rel="prefetch" href="/blogs/assets/Pinia.html-387c093b.js" as="script"><link rel="prefetch" href="/blogs/assets/Vue3.html-16d06532.js" as="script"><link rel="prefetch" href="/blogs/assets/VueApi.html-bb8b9635.js" as="script"><link rel="prefetch" href="/blogs/assets/VueRouter.html-ae38cb38.js" as="script"><link rel="prefetch" href="/blogs/assets/Vuex4.html-7a289a91.js" as="script"><link rel="prefetch" href="/blogs/assets/vue_notes.html-cbe8ffc8.js" as="script"><link rel="prefetch" href="/blogs/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/blogs/assets/index.html-443e75e2.js" as="script"><link rel="prefetch" href="/blogs/assets/css.html-ab74bca3.js" as="script"><link rel="prefetch" href="/blogs/assets/css3.html-77914954.js" as="script"><link rel="prefetch" href="/blogs/assets/html.html-841090be.js" as="script"><link rel="prefetch" href="/blogs/assets/html5.html-4d4eaa91.js" as="script"><link rel="prefetch" href="/blogs/assets/JavaScript.html-099c0d25.js" as="script"><link rel="prefetch" href="/blogs/assets/TypeScript.html-f51a5af3.js" as="script"><link rel="prefetch" href="/blogs/assets/bigscreen.html-0d51dc7f.js" as="script"><link rel="prefetch" href="/blogs/assets/react.html-eb1112c8.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-3457663e.js" as="script"><link rel="prefetch" href="/blogs/assets/vue.html-3059cfc3.js" as="script"><link rel="prefetch" href="/blogs/assets/handbook.html-cd96bfb6.js" as="script"><link rel="prefetch" href="/blogs/assets/React.html-659a8167.js" as="script"><link rel="prefetch" href="/blogs/assets/ReactRouter.html-dc674066.js" as="script"><link rel="prefetch" href="/blogs/assets/Redux.html-9f749333.js" as="script"><link rel="prefetch" href="/blogs/assets/StudyTutorial.html-f43ec5ce.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-9ec54961.js" as="script"><link rel="prefetch" href="/blogs/assets/Pinia.html-1dcc52b7.js" as="script"><link rel="prefetch" href="/blogs/assets/Vue3.html-48a9f634.js" as="script"><link rel="prefetch" href="/blogs/assets/VueApi.html-684b02dc.js" as="script"><link rel="prefetch" href="/blogs/assets/VueRouter.html-6184995c.js" as="script"><link rel="prefetch" href="/blogs/assets/Vuex4.html-1fce3133.js" as="script"><link rel="prefetch" href="/blogs/assets/vue_notes.html-096e3b77.js" as="script"><link rel="prefetch" href="/blogs/assets/404.html-8fc28dc8.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/blogs/" class=""><img class="logo" src="https://cdn.pixabay.com/animation/2022/08/05/07/12/07-12-14-597_512.gif" alt="PERSIST"><span class="site-name can-hide">PERSIST</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>html</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/html.html" class="" aria-label="HTML"><!--[--><!--]--> HTML <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/html5.html" class="" aria-label="HTML 5"><!--[--><!--]--> HTML 5 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>css</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/css.html" class="" aria-label="CSS"><!--[--><!--]--> CSS <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/css3.html" class="" aria-label="CSS 3"><!--[--><!--]--> CSS 3 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>JavaScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/JavaScript.html" class="" aria-label="JavaScript"><!--[--><!--]--> JavaScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>TypeScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/TypeScript.html" class="" aria-label="TypeScript"><!--[--><!--]--> TypeScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Vue"><span class="title">Vue</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Vue"><span class="title">Vue</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vue3.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueApi.html" class="" aria-label="Vue API"><!--[--><!--]--> Vue API <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueRouter.html" class="" aria-label="Vue Router"><!--[--><!--]--> Vue Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vuex4.html" class="" aria-label="Vuex"><!--[--><!--]--> Vuex <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Pinia.html" class="" aria-label="Pinia"><!--[--><!--]--> Pinia <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="React"><span class="title">React</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="React"><span class="title">React</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/React.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/ReactRouter.html" class="" aria-label="React Router"><!--[--><!--]--> React Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/Redux.html" class="" aria-label="Redux"><!--[--><!--]--> Redux <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>三剑客</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a aria-current="page" href="/blogs/case/base.html" class="router-link-active router-link-exact-active router-link-active" aria-label="三剑客"><!--[--><!--]--> 三剑客 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/vue.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>uni-app</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/uniapp/uniapp.html" class="" aria-label="uni-app 教程"><!--[--><!--]--> uni-app 教程 <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/case/uniapp.html" class="" aria-label="uni-app"><!--[--><!--]--> uni-app <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/react.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>大屏</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/bigscreen.html" class="" aria-label="大屏"><!--[--><!--]--> 大屏 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><a href="/blogs/StudyTutorial/StudyTutorial.md" class="" aria-label="学习教程"><!--[--><!--]--> 学习教程 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/blogs/handbook/handbook.md" class="" aria-label="前端手册"><!--[--><!--]--> 前端手册 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/fayuanpersist/blogs" rel="noopener noreferrer" target="_blank" aria-label="Gitee"><!--[--><!--]--> Gitee <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>html</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/html.html" class="" aria-label="HTML"><!--[--><!--]--> HTML <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/html5.html" class="" aria-label="HTML 5"><!--[--><!--]--> HTML 5 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>css</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/css.html" class="" aria-label="CSS"><!--[--><!--]--> CSS <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/css3.html" class="" aria-label="CSS 3"><!--[--><!--]--> CSS 3 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>JavaScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/JavaScript.html" class="" aria-label="JavaScript"><!--[--><!--]--> JavaScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>TypeScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/TypeScript.html" class="" aria-label="TypeScript"><!--[--><!--]--> TypeScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Vue"><span class="title">Vue</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Vue"><span class="title">Vue</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vue3.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueApi.html" class="" aria-label="Vue API"><!--[--><!--]--> Vue API <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueRouter.html" class="" aria-label="Vue Router"><!--[--><!--]--> Vue Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vuex4.html" class="" aria-label="Vuex"><!--[--><!--]--> Vuex <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Pinia.html" class="" aria-label="Pinia"><!--[--><!--]--> Pinia <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="React"><span class="title">React</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="React"><span class="title">React</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/React.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/ReactRouter.html" class="" aria-label="React Router"><!--[--><!--]--> React Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/Redux.html" class="" aria-label="Redux"><!--[--><!--]--> Redux <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>三剑客</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a aria-current="page" href="/blogs/case/base.html" class="router-link-active router-link-exact-active router-link-active" aria-label="三剑客"><!--[--><!--]--> 三剑客 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/vue.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>uni-app</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/uniapp/uniapp.html" class="" aria-label="uni-app 教程"><!--[--><!--]--> uni-app 教程 <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/case/uniapp.html" class="" aria-label="uni-app"><!--[--><!--]--> uni-app <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/react.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>大屏</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/bigscreen.html" class="" aria-label="大屏"><!--[--><!--]--> 大屏 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><a href="/blogs/StudyTutorial/StudyTutorial.md" class="" aria-label="学习教程"><!--[--><!--]--> 学习教程 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/blogs/handbook/handbook.md" class="" aria-label="前端手册"><!--[--><!--]--> 前端手册 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/fayuanpersist/blogs" rel="noopener noreferrer" target="_blank" aria-label="Gitee"><!--[--><!--]--> Gitee <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading active collapsible">三剑客 <span class="down arrow"></span></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/blogs/case/base.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="三剑客"><!--[--><!--]--> 三剑客 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/blogs/case/base.html#精度丢失" class="router-link-active router-link-exact-active sidebar-item" aria-label="精度丢失"><!--[--><!--]--> 精度丢失 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/case/base.html#轮播图" class="router-link-active router-link-exact-active sidebar-item" aria-label="轮播图"><!--[--><!--]--> 轮播图 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/case/base.html#密码强度" class="router-link-active router-link-exact-active sidebar-item" aria-label="密码强度"><!--[--><!--]--> 密码强度 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/case/base.html#js数组转为树结构" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS数组转为树结构"><!--[--><!--]--> JS数组转为树结构 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/case/base.html#url-的编码和解码" class="router-link-active router-link-exact-active sidebar-item" aria-label="URL 的编码和解码"><!--[--><!--]--> URL 的编码和解码 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">Vue <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/case/vue.html" class="sidebar-item" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">uni-app <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/case/uniapp.html" class="sidebar-item" aria-label="uni-app"><!--[--><!--]--> uni-app <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">React <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/case/react.html" class="sidebar-item" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">大屏 <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/case/bigscreen.html" class="sidebar-item" aria-label="大屏"><!--[--><!--]--> 大屏 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="三剑客" tabindex="-1"><a class="header-anchor" href="#三剑客" aria-hidden="true">#</a> 三剑客</h1><blockquote><p>所谓的三剑客, 即 HTML/HTML5 + CSS/CSS3 + JavaScript</p></blockquote><p><a href="https://gitee.com/fayuanpersist/50projects50days" target="_blank" rel="noopener noreferrer">50projects50days<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><blockquote><p>50 个采用 HTML+CSS+JS 的前端小项目集合</p></blockquote><h2 id="精度丢失" tabindex="-1"><a class="header-anchor" href="#精度丢失" aria-hidden="true">#</a> 精度丢失</h2><details class="custom-container details"><summary>精度丢失 <span class="badge tip" style=""><!--[-->解决方法<!--]--></span></summary><p><strong>加法运算</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>时不时会出现像下面的情况
<span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span> <span class="token operator">=</span> <span class="token number">0.30000000000000004</span>

<span class="token literal-property property">解决方法如下</span><span class="token operator">:</span>
<span class="token keyword">const</span> <span class="token function-variable function">numAdd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> baseNum <span class="token punctuation">,</span> baseNum1 <span class="token punctuation">,</span>baseNum2<span class="token punctuation">;</span>

    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        baseNum1 <span class="token operator">=</span> num1<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> 
        baseNum1 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        baseNum2 <span class="token operator">=</span> num2<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        baseNum2 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    baseNum <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>baseNum1<span class="token punctuation">,</span> baseNum2<span class="token punctuation">)</span><span class="token punctuation">)</span> 
    <span class="token keyword">const</span> precision <span class="token operator">=</span> baseNum1 <span class="token operator">&gt;=</span> baseNum2 <span class="token operator">?</span> baseNum1 <span class="token operator">:</span> baseNum2 <span class="token comment">// 精度(保留几位数)</span>

    <span class="token keyword">return</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span>num1 <span class="token operator">*</span> baseNum <span class="token operator">+</span> num2 <span class="token operator">*</span> baseNum<span class="token punctuation">)</span> <span class="token operator">/</span> baseNum<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span>precision<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>减法运算</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>时不时会出现像下面的情况
<span class="token number">0.3</span> <span class="token operator">-</span> <span class="token number">0.1</span> <span class="token operator">=</span> <span class="token number">0.19999999999999998</span>

<span class="token literal-property property">解决方法如下</span><span class="token operator">:</span>
<span class="token keyword">const</span> <span class="token function-variable function">numSub</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> baseNum <span class="token punctuation">,</span> baseNum1 <span class="token punctuation">,</span>baseNum2<span class="token punctuation">;</span>

    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        baseNum1 <span class="token operator">=</span> num1<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">// 1</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> 
        baseNum1 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        baseNum2 <span class="token operator">=</span> num2<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39;.&#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">// 1</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        baseNum2 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    baseNum <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>baseNum1<span class="token punctuation">,</span> baseNum2<span class="token punctuation">)</span><span class="token punctuation">)</span> 
    <span class="token keyword">const</span> precision <span class="token operator">=</span> baseNum1 <span class="token operator">&gt;=</span> baseNum2 <span class="token operator">?</span> baseNum1 <span class="token operator">:</span> baseNum2 <span class="token comment">// 精度</span>

    <span class="token keyword">return</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span>num1 <span class="token operator">*</span> baseNum <span class="token operator">-</span> num2 <span class="token operator">*</span> baseNum<span class="token punctuation">)</span> <span class="token operator">/</span> baseNum<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span>precision<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>乘法运算</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>时不时会出现像下面的情况
<span class="token number">1.1</span> <span class="token operator">*</span> <span class="token number">100</span> <span class="token operator">=</span> <span class="token number">110.00000000000001</span> 
<span class="token number">0.1</span> <span class="token operator">*</span> <span class="token number">0.2</span> <span class="token operator">=</span> <span class="token number">0.020000000000000004</span>  

<span class="token literal-property property">解决方法如下</span><span class="token operator">:</span>
<span class="token keyword">const</span> <span class="token function-variable function">numMulti</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> baseNum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// 获取小数后面有几位</span>

    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        baseNum <span class="token operator">+=</span> num1<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>

    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        baseNum <span class="token operator">+=</span> num2<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token function">Number</span><span class="token punctuation">(</span>num1<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">Number</span><span class="token punctuation">(</span>num2<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> baseNum<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>除法运算</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>时不时会出现像下面的情况
<span class="token number">0.3</span> <span class="token operator">/</span> <span class="token number">0.1</span> <span class="token operator">=</span> <span class="token number">2.9999999999999996</span>

<span class="token literal-property property">解决方法如下</span><span class="token operator">:</span>
<span class="token keyword">const</span> <span class="token function-variable function">numDiv</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> baseNum1<span class="token punctuation">,</span> baseNum2<span class="token punctuation">,</span> baseNum3<span class="token punctuation">,</span> baseNum4<span class="token punctuation">;</span>
    
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        baseNum1 <span class="token operator">=</span> num1<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        baseNum1 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        baseNum2 <span class="token operator">=</span> num2<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        baseNum2 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    baseNum3 <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>num1<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    baseNum4 <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>num2<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">(</span>baseNum3 <span class="token operator">/</span> baseNum4<span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> baseNum2 <span class="token operator">-</span> baseNum1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>知识点讲解</strong></p><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/try...catch" target="_blank" rel="noopener noreferrer">try...catch<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><blockquote><p>可捕获错误</p></blockquote><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" target="_blank" rel="noopener noreferrer">Number.prototype.toString()<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><blockquote><p>将数值转化为字符串</p></blockquote><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split" target="_blank" rel="noopener noreferrer">String.prototype.split()<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><blockquote><p>String.prototype.split(&#39;.&#39;) 将字符串以&#39;.&#39;进行分割成一个有序的子串列表，将这些子串放入一个数组，并返回该数组。</p></blockquote><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace" target="_blank" rel="noopener noreferrer">String.prototype.replace()<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><blockquote><p>String.prototype.replace(&quot;.&quot;,&quot;&quot;) 字符串的替换</p></blockquote><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" target="_blank" rel="noopener noreferrer">Math.pow()<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><blockquote><p>Math.pow(base , exponent) 函数返回基数（base）的指数（exponent）次幂，即 base^exponent</p></blockquote><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/max" target="_blank" rel="noopener noreferrer">Math.max()<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><blockquote><p>Math.max() 函数返回作为输入参数的最大数字，如果没有参数，则返回 -Infinity。</p></blockquote></details><h2 id="轮播图" tabindex="-1"><a class="header-anchor" href="#轮播图" aria-hidden="true">#</a> 轮播图</h2><details class="custom-container details"><summary>轮播图 <span class="badge tip" style=""><!--[-->源码 解析<!--]--></span></summary><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">*</span><span class="token punctuation">{</span>
            <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
            <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">ul,ol,li</span><span class="token punctuation">{</span>
            <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">a,a:hover,a:active</span><span class="token punctuation">{</span>
            <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">img</span><span class="token punctuation">{</span>
            <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
            <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>

            <span class="token property">border</span><span class="token punctuation">:</span>3px solid #000<span class="token punctuation">;</span>

            <span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span>

            <span class="token comment">/* overflow: hidden; */</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box ul</span> <span class="token punctuation">{</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
            <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
            <span class="token property">top</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
            <span class="token property">left</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box ul::after</span><span class="token punctuation">{</span>
            <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
            <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
            <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box ul li</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
            <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
            <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
            <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

        <span class="token punctuation">}</span>

        <span class="token selector">.box ol</span><span class="token punctuation">{</span>
            <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
            <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
            <span class="token property">bottom</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>
            <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
            <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box ol li</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
            <span class="token property">border-radius</span><span class="token punctuation">:</span>50% <span class="token punctuation">;</span>
            <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
            <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
            <span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box ol li:last-child</span><span class="token punctuation">{</span>
            <span class="token property">margin-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box ol li.active</span><span class="token punctuation">{</span>
            <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box div</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
            <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
            <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
            <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
            <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
            <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.box div button</span><span class="token punctuation">{</span>
            <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
            <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
            <span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>


    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../../../move.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token comment">// 定义数组 模拟轮播图数据库数据</span>
        <span class="token keyword">var</span> imgArr <span class="token operator">=</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">1</span> <span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">600</span> <span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span><span class="token number">400</span> <span class="token punctuation">,</span> <span class="token literal-property property">size</span><span class="token operator">:</span><span class="token number">123</span> <span class="token punctuation">,</span> <span class="token literal-property property">src</span><span class="token operator">:</span><span class="token string">&#39;https://pics1.baidu.com/feed/e7cd7b899e510fb39f12ffed37c36390d0430cb3.jpeg?token=a785042a78db2261ffe712923d6372f3&amp;s=F708F20B5EF3FFD00A009DAE03006021&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">2</span> <span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">600</span> <span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span><span class="token number">400</span> <span class="token punctuation">,</span> <span class="token literal-property property">size</span><span class="token operator">:</span><span class="token number">124</span> <span class="token punctuation">,</span> <span class="token literal-property property">src</span><span class="token operator">:</span><span class="token string">&#39;https://img2.baidu.com/it/u=742172290,1417042053&amp;fm=253&amp;fmt=auto?w=600&amp;h=400&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">3</span> <span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">600</span> <span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span><span class="token number">400</span> <span class="token punctuation">,</span> <span class="token literal-property property">size</span><span class="token operator">:</span><span class="token number">125</span> <span class="token punctuation">,</span> <span class="token literal-property property">src</span><span class="token operator">:</span><span class="token string">&#39;https://gimg2.baidu.com/image_search/src=http%3A%2F%2F03imgmini.eastday.com%2Fmobile%2F20191222%2F20191222192255_e864904989025db1dc40f68e7c439bb4_2.png&amp;refer=http%3A%2F%2F03imgmini.eastday.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1657935977&amp;t=023aebbb222c921caa533c3b7c7ee1ec&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">4</span> <span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">600</span> <span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span><span class="token number">400</span> <span class="token punctuation">,</span> <span class="token literal-property property">size</span><span class="token operator">:</span><span class="token number">126</span> <span class="token punctuation">,</span> <span class="token literal-property property">src</span><span class="token operator">:</span><span class="token string">&#39;https://img1.baidu.com/it/u=1725616347,3287513527&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=333&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">5</span> <span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span><span class="token number">600</span> <span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span><span class="token number">400</span> <span class="token punctuation">,</span> <span class="token literal-property property">size</span><span class="token operator">:</span><span class="token number">127</span> <span class="token punctuation">,</span> <span class="token literal-property property">src</span><span class="token operator">:</span><span class="token string">&#39;https://pic.rmb.bdstatic.com/5b442fc0f7b3d43b2f4752aa49e56cda.jpeg&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">;</span>

        <span class="token comment">// 获取 div标签对象 </span>
        <span class="token keyword">var</span> oBox <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.box&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// ! 定义全局变量储存多个函数都要使用的数据</span>

        <span class="token keyword">var</span> oUl <span class="token punctuation">;</span>
        <span class="token keyword">var</span> oOl <span class="token punctuation">;</span>
        <span class="token keyword">var</span> oDiv <span class="token punctuation">;</span>
        <span class="token keyword">var</span> ulLis <span class="token punctuation">;</span>
        <span class="token keyword">var</span> olLis <span class="token punctuation">;</span>
        <span class="token keyword">var</span> ulLiWidth <span class="token punctuation">;</span> 

        <span class="token comment">// 定义全局变量储存定时器编号</span>
        <span class="token keyword">var</span> time <span class="token punctuation">;</span>

        <span class="token comment">// 定义一个变量 存储 当前要显示的ul&gt;li标签的索引下标</span>
        <span class="token comment">// 初始状态显示的是 第二个 ul&gt;li标签 索引下标是 1</span>
        <span class="token comment">// 也就是 变量的初始值 是 1</span>
        <span class="token keyword">var</span> index <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span>


        <span class="token comment">// 防止点击过快方法1</span>
        <span class="token comment">// 定义全局变量 存储 点击的标签对象</span>
        <span class="token keyword">var</span> clickEle <span class="token punctuation">;</span>

        <span class="token comment">// 防止点击过快方法2</span>
        <span class="token comment">// 定义全局 开关变量 存储默认值</span>
        <span class="token keyword">var</span> flag <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>


        <span class="token comment">// 调用函数setPage 动态渲染生成页面</span>
        <span class="token function">setPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

        <span class="token comment">// 调用函数autoLoop 实现轮播图的自动轮播</span>
        <span class="token function">autoLoop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 调动函数setMouse 设定鼠标移入移出</span>
        <span class="token function">setMouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 调用函数setClick 设定点击事件</span>
        <span class="token function">setClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 调用函数setHide  设定 浏览器最小化/后台运行</span>
        <span class="token function">setHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>



        <span class="token comment">// 定义函数 动态渲染生成页面</span>
        <span class="token keyword">function</span> <span class="token function">setPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 创建 ul&gt;li 标签对象</span>
            <span class="token comment">// 创建 ul标签对象 </span>
            <span class="token comment">// 给 全局变量赋值</span>
            oUl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;ul&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// 创建 ol&gt;li 标签对象</span>
            <span class="token comment">// 创建 ol标签对象</span>
            oOl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;ol&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// 定义字符串 存储 生成的 ul&gt;li 内容</span>
            <span class="token keyword">var</span> ulLiStr <span class="token operator">=</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>

            <span class="token comment">// 定义字符串 存储 生成的 ol&gt;li 内容</span>
            <span class="token keyword">var</span> olLiStr <span class="token operator">=</span> <span class="token string">&#39;&#39;</span> <span class="token punctuation">;</span>

            <span class="token comment">// 循环遍历数组 动态生成 ol&gt;li </span>
            imgArr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">item <span class="token punctuation">,</span> index</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// item 是 数组中 数据单元存储的对象</span>
                <span class="token comment">// index 是 数组中 数据单元的索引下标</span>

                <span class="token comment">// ul&gt;li标签中的内容</span>
                <span class="token comment">// 图片的路径地址 应该是 数组中 数据单元存储的对象中 src属性的属性值</span>
                ulLiStr <span class="token operator">+=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;li&gt;&lt;img src=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot; alt=&quot;&quot;&gt;&lt;/li&gt;</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">;</span>


                <span class="token comment">// ol&gt;li标签中的内容</span>
                <span class="token comment">// 一个 ol&gt;li 添加 class active</span>
                <span class="token comment">// 定义 ol&gt;li 标签 时 定义 2个 属性</span>
                <span class="token comment">// name属性 用于 事件委托判断区别触发的标签</span>
                <span class="token comment">// num属性  用于 存储标签的索引下标</span>
                olLiStr <span class="token operator">+=</span> index <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;li class=&quot;active&quot; name=&quot;olLi&quot; num=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;&gt;&lt;/li&gt;</span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;li name=&quot;olLi&quot; num=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;&gt;&lt;/li&gt;</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">;</span>
                
            <span class="token punctuation">}</span><span class="token punctuation">)</span>

            <span class="token comment">// 将 字符串内容 写入 ul标签中</span>
            oUl<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> ulLiStr <span class="token punctuation">;</span>
            <span class="token comment">// 将 字符串内容 写入 ol标签中</span>
            oOl<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> olLiStr <span class="token punctuation">;</span>
            <span class="token comment">// 这里写入的是字符串 必须使用 innerHTML DOM 操作方式</span>



            <span class="token comment">// 创建 div&gt;a 标签对象</span>
            <span class="token comment">// div 中 是 固定的 左右切换按钮 是 固定的内容</span>
            oDiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;div&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// a标签定义 name属性 事件委托判断区别触发的标签</span>
            oDiv<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">&#39;&lt;button name=&quot;left&quot;&gt;&amp;lt;&lt;/button&gt;&lt;button name=&quot;right&quot;&gt;&amp;gt;&lt;/button&gt;&#39;</span><span class="token punctuation">;</span>


            <span class="token comment">// 将创建的 ul&gt;li ol&gt;li div 写入 轮播图div标签对象中</span>
            oBox<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> oUl <span class="token punctuation">)</span><span class="token punctuation">;</span>
            oBox<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> oOl <span class="token punctuation">)</span><span class="token punctuation">;</span>
            oBox<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> oDiv <span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 这里是将标签对象写入 必须使用 节点操作语法</span>


            <span class="token comment">// 执行节点操作 是 将 标签对象 写入到 页面中</span>
            <span class="token comment">// 如果 没有执行 节点操作 页面中 是没有标签对象的</span>
            <span class="token comment">// 在 没有执行写入的情况下 document 也就是html文档中 是没有标签对象的</span>
            <span class="token comment">// 但是 oUl 和 oOl 标签对象 中 已经写入了内容 可以 获取标签对象 </span>

            <span class="token comment">// console.log( document );</span>
            <span class="token comment">// console.log( oUl );</span>
            <span class="token comment">// console.log( oOl );</span>


            <span class="token comment">// 获取 当前原始的 所有的 ul&gt;li ol&gt;li</span>

            <span class="token comment">// 没有写入标签对象 通过 document 是不能获取标签对象的</span>
            <span class="token comment">// ulLis = document.querySelectorAll(&#39;li&#39;);</span>
            <span class="token comment">// olLis = document.querySelectorAll(&#39;li&#39;);</span>

            <span class="token comment">// 虽然没有写入 文档中 但是 oUl oOl 中 已经写入了标签对象</span>
            <span class="token comment">// 可以 通过 oUl 和 oOl 获取 标签对象</span>

            <span class="token comment">// 获取 原始的所有的ul&gt;li标签对象</span>
            ulLis <span class="token operator">=</span> oUl<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&#39;li&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 获取 原始的所有的ol&gt;li标签对象</span>
            olLis <span class="token operator">=</span> oOl<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&#39;li&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// 克隆 原始轮播图 第一个li标签和标签内容</span>
            <span class="token keyword">var</span> ulLiFirst <span class="token operator">=</span> ulLis<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 克隆 原始轮播图 最后一个li标签和标签内容</span>
            <span class="token keyword">var</span> ulLiLast <span class="token operator">=</span> ulLis<span class="token punctuation">[</span>imgArr<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// 将 克隆的原始轮播图第一张写入 ul末位</span>
            oUl<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> ulLiFirst <span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// 将 克隆的原始轮播图最后一张写入 ul起始</span>
            oUl<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span> ulLiLast <span class="token punctuation">,</span> ulLis<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// 获取 一个 ul&gt;li 标签的宽度(内容+padding+border)</span>
            <span class="token comment">// 赋值给全局变量储存</span>
            ulLiWidth <span class="token operator">=</span> ulLis<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>offsetWidth <span class="token punctuation">;</span>

            <span class="token comment">// 设定 ul标签的宽度 是 数组中单元个数+2 * li标签的宽度 </span>
            <span class="token comment">// 也就是原始轮播图图片个数是5 实际执行程序 ul&gt;li标签个数是 5+2 --- 7</span>
            <span class="token comment">// 设定的数值 需要拼接 px 单位</span>
            oUl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token punctuation">(</span>imgArr<span class="token punctuation">.</span>length<span class="token operator">+</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">*</span>  ulLiWidth <span class="token operator">+</span> <span class="token string">&#39;px&#39;</span> <span class="token punctuation">;</span>

            <span class="token comment">// 因为 克隆 原始轮播图 第一张 写在 ul标签末位</span>
            <span class="token comment">// 克隆 原始轮播图 最后一张 写在 ul标签起始</span>
            <span class="token comment">// 当期 ul标签 默认显示的第一张 是 原始轮播图最后一张</span>
            <span class="token comment">// 应该显示 当前ul标签 第二张图片 也就是 原始轮播图的第一张</span>
            oUl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token operator">-</span>ulLiWidth <span class="token operator">+</span> <span class="token string">&#39;px&#39;</span> <span class="token punctuation">;</span>

        <span class="token punctuation">}</span>


        <span class="token comment">// 定义函数 实现轮播图的轮序播放</span>
        <span class="token keyword">function</span> <span class="token function">autoLoop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

            time <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 变量储存的数值累加1</span>
                <span class="token comment">// 变量index中存储的数值 本质上是 要显示的ul&gt;li标签的索引下标</span>
                <span class="token comment">// 通过 索引下标 计算 ul标签定位的数值</span>
                <span class="token comment">// ! 也就是 index的数值 决定 ul标签的定位 也就是 决定显示哪个轮播图</span>
                <span class="token comment">// ! 轮播图demo中 就是 通过 控制 index变量的数值 控制显示哪个轮播图</span>
                index<span class="token operator">++</span> <span class="token punctuation">;</span>

                <span class="token comment">// 调用 焦点样式设定函数 </span>
                <span class="token comment">// 写在 index++ 之后 </span>
                <span class="token comment">// 也就是 显示的ul&gt;li标签 索引下标切换之后 </span>
                <span class="token comment">// 设定 切换对应的 焦点样式</span>
                <span class="token comment">// 设定样式的焦点按钮 和 显示的 ul&gt;li标签 是 相互对应的关系</span>
                <span class="token function">setFocusStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token comment">// 调用move()运动函数完成 ul标签 定位 运动切换</span>
                <span class="token comment">// 直接给ul标签设定left定位属性值 切换是瞬间完成的</span>
                <span class="token comment">// 调用 move() 运动函数 让 ul标签定位的切换是运动完成的</span>
                <span class="token comment">// left 定位的属性值 是 - index变量储存的数值 * li标签的宽度</span>
                <span class="token function">move</span><span class="token punctuation">(</span> oUl <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">left</span> <span class="token operator">:</span> <span class="token operator">-</span>index<span class="token operator">*</span> ulLiWidth <span class="token punctuation">}</span> <span class="token punctuation">,</span> loopEnd <span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">3000</span> <span class="token punctuation">)</span>
        <span class="token punctuation">}</span>


        <span class="token comment">// move()运动函数 执行结束触发的回调函数</span>
        <span class="token keyword">function</span> <span class="token function">loopEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 当 显示的是 当前ul&gt;li标签的最后一个 </span>
            <span class="token keyword">if</span><span class="token punctuation">(</span> index <span class="token operator">===</span> imgArr<span class="token punctuation">.</span>length<span class="token operator">+</span><span class="token number">1</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 显示 当前 ul&gt;li 第二个标签</span>
                <span class="token comment">// 也就是 给 index 变量 赋值 当前ul&gt;li 第二个ul&gt;li标签的索引下标</span>

                <span class="token comment">// 定位切换至 第二个ul&gt;li 下一个显示的是 第三个 ul&gt;li </span>
                <span class="token comment">// 必须要给 index 变量 重新赋值 1 </span>
                <span class="token comment">// 自动轮播中 index++ 才是从 1 开始 累加 之后显示的是 第二张 轮播图片</span>

                <span class="token comment">// 如果 没有 赋值 index 下次是 继续 最后一个ul&gt;li 索引下标 累加 </span>
                <span class="token comment">// 执行 效果 就会 出问题</span>
                index <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span>

                <span class="token comment">// 设定 ul标签定位切换 </span>
                <span class="token comment">// 通过设定 ul标签css样式 瞬间完成定位切换</span>
                oUl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token operator">-</span>index <span class="token operator">*</span> ulLiWidth <span class="token operator">+</span> <span class="token string">&#39;px&#39;</span> <span class="token punctuation">;</span>

            <span class="token comment">// 当 显示的是 当前ul&gt;li标签的第一个</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span> index <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 给 index 变量 赋值 当前ul&gt;li标签 倒数第二个 索引下标</span>
                index <span class="token operator">=</span> imgArr<span class="token punctuation">.</span>length <span class="token punctuation">;</span>

                <span class="token comment">// 设定 ul标签定位切换</span>
                <span class="token comment">// 通过设定 ul标签css样式 瞬间完成定位切换</span>
                oUl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token operator">-</span>index <span class="token operator">*</span> ulLiWidth <span class="token operator">+</span> <span class="token string">&#39;px&#39;</span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

            <span class="token comment">// 靠谱方法1 禁用</span>
            <span class="token comment">// 如果 没有 点击 左右切换 </span>
            <span class="token comment">// 变量 clickEle 中 存储的是 undefined</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span> clickEle <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 当 变量clickEle 中 存储的不是 undefined</span>
                <span class="token comment">// 证明 已经执行过点击操作了</span>
                <span class="token comment">// 变量clickEle 中 存储了 点击的标签对象 </span>
                <span class="token comment">// 再 给 这个 标签对象 disabled 赋值 false</span>

                <span class="token comment">// 当 move() 运动函数执行结束时 </span>
                <span class="token comment">// 给 button标签 禁用属性 赋值 false </span>
                <span class="token comment">// 也就是 button标签 可以 再次点击</span>
                clickEle<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span>                
            <span class="token punctuation">}</span>


            <span class="token comment">// 靠谱方法2 开关变量</span>
            <span class="token comment">// 给 开关变量 赋值 原始值 true</span>
            flag <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>



        <span class="token punctuation">}</span>


        <span class="token comment">// 焦点样式切换</span>
        <span class="token keyword">function</span> <span class="token function">setFocusStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 显示的 ul&gt;li 和 对应的焦点ol&gt;li 索引下标的关系是</span>
            <span class="token comment">// 显示的 ul&gt;li标签 索引下标-1 是 对应的 ol&gt;li标签 索引下标</span>

            <span class="token comment">// 给所有的ol&gt;li清除样式</span>
            olLis<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">item</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// item 是 每一个 ol&gt;li 标签</span>
                <span class="token comment">// 给所有的 ol&gt;li 清除 class,active</span>
                item<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>

            <span class="token comment">// 给显示的ul&gt;li对应的 ol&gt;li 添加 class,active</span>

            <span class="token comment">// 如果 index 是 当前ul&gt;li 最后一个标签的索引下标 </span>
            <span class="token comment">// ol&gt;li 是 给 第一个 ol&gt;li标签 添加 css样式</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span> index <span class="token operator">===</span> imgArr<span class="token punctuation">.</span>length <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 当前 显示的是 ul&gt;li 中 最后一个 li标签 </span>
                <span class="token comment">// 给 ol&gt;li 中 第一个 li 标签 添加 class,active</span>

                <span class="token comment">// ul&gt;li 的索引下标 是 最后一个ul&gt;li</span>
                <span class="token comment">// 本质 显示的是 原始轮播图的第一张</span>
                <span class="token comment">// 也就是 当前 ul&gt;li 的第二张 索引下标 是 1</span>
                <span class="token comment">// 对应的 ol&gt;li 标签 的索引下标 是 0</span>
                olLis<span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// 当 索引下标 是 0 时 也就是 index 变量 存储 0 时</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span> index <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// 对应的是 原始轮播图 最后一张 </span>
                <span class="token comment">// 也就是 当前 ul&gt;li 中的 倒数第二张</span>
                <span class="token comment">// 对应的是 ol&gt;li 中 最后一个 ol&gt;li </span>
                <span class="token comment">// 当 index 是 0 时 给 ol&gt;li 最后一个 添加 class,active</span>
                olLis<span class="token punctuation">[</span> olLis<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                <span class="token comment">// 当前显示的ul&gt;li索引下标是index </span>
                <span class="token comment">// 当前显示的ul&gt;li标签 对应的 ol&gt;li 标签的索引下标是 index-1</span>
                olLis<span class="token punctuation">[</span>index<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>


        <span class="token comment">// 鼠标移入移出事件</span>
        <span class="token keyword">function</span> <span class="token function">setMouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 鼠标移入 清除定时器</span>
            <span class="token comment">// 事件类型是 mouseenter 只要 进入时 清除定时器一次就可以了</span>
            <span class="token comment">// 如果定义的是 mouseover 后代的ul ol 等标签也会触发</span>
            oBox<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">&#39;mouseenter&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token function">clearInterval</span><span class="token punctuation">(</span> time <span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token punctuation">}</span><span class="token punctuation">)</span>

            <span class="token comment">// 鼠标移出 再次调用自动轮播函数</span>
            oBox<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">&#39;mouseleave&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 再次调用自动轮播函数</span>
                <span class="token function">autoLoop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>

        <span class="token comment">// 点击事件</span>
        <span class="token keyword">function</span> <span class="token function">setClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 给 父级轮播图标签 添加点击事件</span>
            oBox<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">&#39;click&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 需要 通过 event.target 判断触发事件的标签</span>
                <span class="token comment">// console.log( event.target );</span>

                <span class="token comment">// 通过 标签内容 判断 </span>
                <span class="token comment">// 实际项目中 不推荐 </span>
                <span class="token comment">// 页面中的执行效果 和 innerHTML 获取的结果 不一定相同</span>
                <span class="token comment">// console.log( event.target.innerHTML );</span>

                <span class="token comment">// 推荐 通过 标签属性等 判断触发事件的标签</span>
                <span class="token comment">// console.log( event.target.getAttribute(&#39;name&#39;) );</span>

                <span class="token comment">// 标签 name 属性是 left 点击的是 左按钮</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&#39;name&#39;</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&#39;left&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token comment">// 防止点击过快 方法1 </span>
                    <span class="token comment">// 点击之后 给 这个 button标签 添加 禁用属性</span>
                    <span class="token comment">// 添加 禁用属性 赋值 true 执行禁用效果</span>
                    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>

                    <span class="token comment">// 将 点击的标签对象 存储在 变量中</span>
                    clickEle <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> clickEle <span class="token punctuation">)</span><span class="token punctuation">;</span>



                    <span class="token comment">// 点击的是 左按钮 需要显示 上一张 轮播图片</span>
                    <span class="token comment">// 也就是 需要 执行 index-- 操作</span>
                    index<span class="token operator">--</span> <span class="token punctuation">;</span>

                    <span class="token comment">// index改变 对应的 焦点样式 重新设定</span>
                    <span class="token comment">// 调用焦点样式函数 重新设定焦点样式</span>
                    <span class="token function">setFocusStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                    <span class="token comment">// 根据 新的 index数值 设定 ul标签定位 </span>
                    <span class="token comment">// 通过调用 move 运动函数 运动完成切换</span>
                    <span class="token function">move</span><span class="token punctuation">(</span> oUl <span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">left</span><span class="token operator">:</span><span class="token operator">-</span>index <span class="token operator">*</span> ulLiWidth<span class="token punctuation">}</span> <span class="token punctuation">,</span> loopEnd <span class="token punctuation">)</span><span class="token punctuation">;</span>


                <span class="token comment">// 标签 name 属性是 right 点击的是 右按钮</span>
                <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&#39;name&#39;</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&#39;right&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token comment">// 防止点击过快 方法1 </span>
                    <span class="token comment">// 点击之后 给 这个 button标签 添加 禁用属性</span>
                    <span class="token comment">// 添加 禁用属性 赋值 true 执行禁用效果</span>
                    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>


                    <span class="token comment">// 将 点击的标签对象 存储在 变量中</span>
                    clickEle <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> clickEle <span class="token punctuation">)</span><span class="token punctuation">;</span>

                    <span class="token comment">// 点击的是 右按钮 需要显示 下一张 轮播图片</span>
                    <span class="token comment">// 也就是 需要 执行 index++ 操作</span>
                    index<span class="token operator">++</span> <span class="token punctuation">;</span>

                    <span class="token comment">// index改变 对应的 焦点样式 重新设定</span>
                    <span class="token comment">// 调用焦点样式函数 重新设定焦点样式</span>
                    <span class="token function">setFocusStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                    <span class="token comment">// 根据 新的 index数值 设定 ul标签定位 </span>
                    <span class="token comment">// 通过调用 move 运动函数 运动完成切换</span>
                    <span class="token function">move</span><span class="token punctuation">(</span> oUl <span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">left</span><span class="token operator">:</span><span class="token operator">-</span>index <span class="token operator">*</span> ulLiWidth<span class="token punctuation">}</span> <span class="token punctuation">,</span> loopEnd <span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token comment">// 标签 name 属性是 olLi 点击的是 焦点按钮</span>
                <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&#39;name&#39;</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&#39;olLi&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> flag <span class="token punctuation">)</span><span class="token punctuation">;</span>

                    <span class="token comment">// 防止点击过快方法2</span>
                    <span class="token comment">// 在触发执行 点击事件程序之前</span>
                    <span class="token comment">// 判断 开关变量储存的数值 </span>
                    <span class="token comment">// if( flag ){</span>
                    <span class="token comment">//     // 如果变量 flag 是 存储的默认值 true </span>
                    <span class="token comment">//     // 给 开关变量 赋值 false</span>
                    <span class="token comment">//     flag = false ;</span>

                    <span class="token comment">// }else{</span>
                    <span class="token comment">//     // 如果变量 flag 不是 存储默认值 false</span>
                    <span class="token comment">//     // 触发执行 return 操作</span>
                    <span class="token comment">//     return ;</span>
                    <span class="token comment">// }</span>

                    <span class="token comment">// 简写语法形式</span>
                    <span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token operator">!</span>flag <span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">;</span>
                    flag <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span>


                    <span class="token comment">/*
                        第一次 触发 点击事件 
                            开关变量 flag 存储 默认值 true 
                            执行 flag = false ; 
                            给 开关 变量 赋值 false
                            之后的程序 可以 正常执行

                        第二次 触发 点击事件 

                            开关变量 flag 存储 false
                            触发执行 return 操作
                            点击事件中 之后的程序 都会 终止执行
                            也就是 点击 没有任何执行程序了
                            不会触发新的运动函数的调用执行

                        小总结
                            开关变量flag 赋值 存储 true 就可以 点击触发一次 move() 运动函数

                            开关变量如果存储 true 
                                表示 程序中没有正在触发执行的 move() 运动函数 
                                或者 上一个触发的 move() 运动函数 已经执行结束

                                可以 触发 新的 move() 运动函数
                                
                            开关变量如果存储 false
                                表示 程序中 有 正在触发执行的 move() 运动函数

                                不能 触发执行 新的 move() 运动函数
                    
                    
                    
                    
                    */</span>


                    <span class="token comment">// 获取 点击的焦点按钮 也就是 event.target num属性 存储的属性值</span>
                    <span class="token comment">// 获取的 属性值 存储的数据 都是 字符串类型 必须要 转化为 数值类型</span>
                    <span class="token comment">// var num = Number( event.target.getAttribute(&#39;num&#39;) ) ;</span>

                    <span class="token comment">// num存储的数值 是 当前 ol&gt;li 标签的 索引下标 </span>
                    <span class="token comment">// ol&gt;li 标签的索引下标 +1 是 对应的 ul&gt;li 标签的索引下标</span>
                    <span class="token comment">// 赋值给 变量 index</span>
                    <span class="token comment">// console.log( num + 1 );</span>
                    <span class="token comment">// index = num + 1 ;</span>

                    index <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&#39;num&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">)</span>  <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">;</span>

                    <span class="token comment">// index改变 对应的 焦点样式 重新设定</span>
                    <span class="token comment">// 调用焦点样式函数 重新设定焦点样式</span>
                    <span class="token function">setFocusStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                    <span class="token comment">// 根据 新的 index数值 设定 ul标签定位 </span>
                    <span class="token comment">// 通过调用 move 运动函数 运动完成切换</span>
                    <span class="token function">move</span><span class="token punctuation">(</span> oUl <span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">left</span><span class="token operator">:</span><span class="token operator">-</span>index <span class="token operator">*</span> ulLiWidth<span class="token punctuation">}</span> <span class="token punctuation">,</span> loopEnd <span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token punctuation">}</span>   

            <span class="token punctuation">}</span><span class="token punctuation">)</span> 


        <span class="token punctuation">}</span>

        <span class="token comment">// 浏览器 最小化 / 后台运行</span>
        <span class="token keyword">function</span> <span class="token function">setHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      

            <span class="token comment">// visibilitychange 浏览器显示状态监听事件</span>
            <span class="token comment">// 当 浏览器显示状态改变时 会触发 </span>
            document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">&#39;visibilitychange&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 浏览器显示状态描述 </span>
                <span class="token comment">//      hidden  浏览器 后台运行</span>
                <span class="token comment">//      visible 浏览器 显示</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span>visibilityState <span class="token punctuation">)</span>


                <span class="token keyword">if</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span>visibilityState <span class="token operator">===</span> <span class="token string">&#39;hidden&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token comment">// 浏览器 后台运行 </span>
                    <span class="token comment">// 清除 自动轮播定时器</span>
                    <span class="token function">clearInterval</span><span class="token punctuation">(</span> time <span class="token punctuation">)</span><span class="token punctuation">;</span>
                
                <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span>visibilityState <span class="token operator">===</span> <span class="token string">&#39;visible&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token comment">// 浏览器 显示 不是 后台运行了</span>
                    <span class="token comment">// 再次调用自动轮播函数</span>
                    <span class="token function">autoLoop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token punctuation">}</span>


            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>


    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token comment">/*
            轮播图1     html和css

            轮播图2     动态生成
                ul&gt;li   
                    轮播图内容
                    原始轮播图是5张 执行时 轮播图是7张
                    原始轮播图第一张 克隆 写入最后
                    原始轮播图最后一张 克隆 写入起始

                ol&gt;li
                    焦点按钮内容
                    根据轮播图内容个数 动态生成
                    也就是 焦点按钮的个数 和 轮播图原始图片个数 一一对应

                div
                    左右切换内容
                    要么没有 要么就是固定的内容形式


                步骤过程
                    创建 ul ol 标签对象
                        ! ul ol 标签对象 多个函数需要使用
                        ! 要 先定义全局变量储存 在 函数中 只是给全局变量赋值

                    循环遍历 图片数组
                    每一个图片数组单元 对应生成 一个 ul&gt;li oL&gt;li 标签对象
                        一个数组单元 对应生成 一个 ul&gt;li标签 
                            ul&gt;li标签中 img标签 src属性是 存储图片信息数组中 对象中存储的路径地址

                        一个数组单元 对应生成 一个 ol&gt;li标签
                            一个 ol&gt;li 标签 有 class,active

                    将 生成的 ul&gt;li ol&gt;li 写入 ul标签 ol标签

                    生成 div标签 
                        内容是 固定的 左右按钮内容

                    将 生成 ul ol div 都写入 轮播图div

                    获取 所有的 ul&gt;li 标签对象 

                    克隆 ul&gt;li 第一个标签对象
                    克隆 ul&gt;li 最后一个标签对象

                    将 克隆的 ul&gt;li 第一个标签对象 写入 ul标签 末位
                    将 克隆的 ul&gt;li 最后一个标签对象 写入 ul标签 起始

                    获取 ul&gt;li标签 宽度
                        使用全局变量储存

                    设定 ul标签 宽度 
                        当前克隆之后 ul&gt;li 标签 个数 乘以 一个 ul&gt;li 标签宽度 

                    设定 ul标签 定位 
                        因为 当前 ul&gt;li 标签的第一个是 克隆的原始ul&gt;li标签的最后一个
                        定位 ul标签 显示 当前 ul&gt;li 标签的 第二个 也就是 原始路轮播图的第一个 图片

        
            轮播图3     自动轮播
                显示的ul&gt;li 是 通过 ul标签定位实现的
                定位数值的计算 就是 要显示的ul&gt;li标签 索引下标 乘以 一个ul&gt;li的宽度

                定义一个变量 存储 要显示的当前ul&gt;li的索引下标

                设定一个定时器 每次执行定时器 变量储存的数值 执行累加操作
                    本质是 修改 存储的索引下标 
                    索引下标累加 1 也就是 显示的是 下一个ul&gt;li 也就是下一张图片 

                    通过 move 运动函数 实现 标签定位的切换 




                ul标签定位的切换 
                    当 轮播图 切换至 当前 ul&gt;li 中 最后一个 li标签 时 
                    move() 运动函数执行结束 也就是 ul标签运动效果执行结束 
                    将 ul标签 切换到 显示 当前ul&gt;li中的 第二个 li标签



                总结:
                    !   在轮播图demo中 通过 index变量储存的数值 也就是 要显示的轮播图索引下标 控制 ul标签定位的数值
                    
                    !   自动轮播定时器 时间间隔 不能 小于 move() 运动函数执行的时间
                        两个定时器嵌套 
                            外层定时器的时间间隔 
                            一定要 大于 内层定时器的执行时间

                            也就是 执行完上一次定时器程序
                            再触发执行 下一次定时器

                            在 同一个时间内只能有一个 move() 运动函数 被触发执行

                            绝对不允许 同一个时间内 触发多个 move() 运动函数在执行

                    自动轮播结束 触发的回调函数 

                        当 ul标签 定位到 最后一个 ul&gt;li 标签 
                        将 ul标签 瞬间定位至 第二个 ul&gt;li 标签 
                            判断 index 存储的数值 是 最后一个 ul&gt;li 的索引下标
                            index 赋值 1 
                            根据 新的 index 存储的索引下标 重新 瞬间定位 ul标签




            轮播图4     焦点样式切换
                在 定时器中 index++ 之后 调用焦点样式切换
                    在定时器中 
                        是 每次切换ul标签定位 都要给对应的 ol&gt;li 焦点标签 重新设定样式

                    index++ 之后
                        是 通过 index变量储存的数值 表示 显示的ul&gt;li标签的索引下标
                        indx++ 之后 表示 显示的ul&gt;li标签 索引下标 切换了
                        对应的 ol&gt;li 标签的索引下标 就可以 对应找到了

                具体程序
                    给所有的ol&gt;li清除 class,active
                    
                    给 显示的ul&gt;li 对应的 ol&gt;li 添加class,active
                        如果 显示的是 ul&gt;li 中 最后一个 
                            显示的原始轮播图中 第一个
                            也就是 当前ul&gt;li 中的第二个 ul&gt;li标签 
                            索引下标是 1 
                            对应的 ol&gt;li 标签 是 索引下标是 0 的 第一个 ol&gt;li标签 

                            index 是 最后一个 ul&gt;li 
                            给 第一个 ol&gt;li 添加 class active

                        其他情况 
                            给 显示的ul&gt;li 索引下标 -1  对应的 ol&gt;li 标签 添加class,active



            轮播图5     鼠标移入移出
                鼠标移入 
                    清除 定时器 停止自动轮播

                    因为鼠标移入 有可能要执行 左右切换 或者 焦点按钮切换
                    定制自动轮播 
                    防止 自动轮播 和 做切换 或者 焦点切换 同时执行 造成显示效果混乱

                鼠标移出
                    再次 调用自动轮播函数 再次自动轮播

            轮播图6     点击事件
                在 执行点击事件之前 一定要 执行 鼠标移入 清除 自动轮播图

                如果不清除自动轮播事件 
                    点击 左右按钮 或者 点击 焦点按钮 切换显示的 ul&gt;li 
                    就会 和 自动轮播 切换 ul&gt;li 发生 冲突 
                    造成 轮播图 显示切换 混乱

                给 父级轮播图标签 添加 点击事件 
                通过 事件委托的语法形式 给 对应的标签 执行 对应的程序


                点击 左按钮 
                    显示 上一张 轮播图片 

                    执行的是 index-- 

                    根据 新的index数值 设定 焦点样式

                    调用 move() 运动函数 运动切换ul标签定位
        
                    需要补充两个操作设定
                        当 切换到 ul&gt;li 的 第一个时 
                        也就是 index 的索引下标 是 0 时 


                            焦点样式函数 
                                给 原始轮播图 最后一个 
                                也就是 当前 ul&gt;li 的 倒数第二个 对应的 ol&gt;li 添加样式 
                                
                                也就是 ol&gt;li 的 最后一个 添加 css样式


                            运动终止的回调函数
                                给 index变量 赋值 当前ul&gt;li 倒数第二个标签的索引下标
                                    imgArr.length

                                直接设定定位属性 瞬间完成 切换操作

                点击 右按钮 
                    显示 下一张 轮播图片 

                    执行的是 index++

                    根据 新的index数值 设定 焦点样式

                    调用 move() 运动函数 运动切换ul标签定位
                        index++的对应 函数设定 都已经设定好了 不用 再修改了
                        焦点样式 运动结束的回调函数 不用再修改了

                点击 焦点按钮
                    显示 点击的焦点按钮 对应的 ul&gt;li 标签 

                        点击的 ol&gt;li 标签 索引下标 +1 
                        就是 对应的 ul&gt;li 标签 索引下标 

                        在 生成 ol&gt;li 标签时 定义 属性 存储 索引下标

                    点击 ol&gt;li 标签时 
                        获取 属性中 存储的属性值 
                        也就是 这个 点击的 ol&gt;li 标签 的 索引下标
                        
                        属性存储的属性值 获取的结果是 字符串类型
                        需要转化为 数值类型

                        ol&gt;li标签的索引下标 数值 + 1 是对应的 ul&gt;li 标签的索引下标
                        将 ol&gt;li 索引下标+1 赋值给 index 变量储存 

                        调用 setFocusStyle()函数 设定 焦点样式 

                        调用 move()函数 运动切换ul标签定位


            轮播图7     防止点击过快
                本质原因
                    同一时间内 触发执行了多个 定时器程序

                    在 轮播图 中 是 同一时间内 触发调用了 多个 move() 运动函数
                    多个运动函数 都会 定义 ul标签的定位 
                    造成执行效果 就是 ul标签定位混乱

                解决方案
                    核心原理 
                        上一个 move() 运动函数 没有执行结束 
                        不允许 触发 执行下一个 move() 运动函数

                    靠谱的解决方法1
                        禁用方法 
                            如果 是 button 这类的标签 有 禁用属性
                            可以 通过 禁用 来 防止点击过快 
                            也就是 防止 触发执行多个 move() 运动函数

                            原理
                                点击 触发执行了 move() 运动函数 
                                就 禁用 button标签 
                                如果 再次点击 不会 触发 事件

                                当 上一次 move() 运动函数 执行结束 
                                    在 move() 运动函数知结束的 回调函数loopEnd 中 
                                    设定 相应操作

                                就 恢复 button标签
                                让 button标签 可以 再次点击

                            代码

                                在 点击判断中 如果点击的是 左按钮 或者 右按钮
                                    给 点击的button标签 添加 禁用属性
                                    也就是 给 event.target 标签 disabled 属性 赋值 true

                                    将 点击的button标签对象 存储在 全局变量clickEle 中

                                在 函数loopEnd 也就是 move() 运动结束的回调函数中
                                    判断 变量clickEle 中 存储的不是 undefined
                                    证明 已经 点击过 左按钮 或者 右按钮 
                                    变量clickEle 中 存储的就是 点击的已经被禁用的标签对象

                                    将 变量clickEle 中 存储的标签对象 disabled 属性 赋值 false


                    靠谱的方法2
                        开关变量方法 

                        思路方法
                            定义一个全局变量 赋值 存储默认值

                            触发执行 点击事件程序之前 先判断 开关变量储存的数值
                                如果是 默认值 给 开关变量赋值其他数值
                                如果不是 默认值 触发执行 return程序 终止之后程序的执行

                            运动结束 给 开关变量赋值 原始值 可以 再次调用触发执行程序

                        代码 
                            在 点击事件执行的程序之前 定义 开关变量的判断

                            如果 开关变量存储 默认值 
                                开关变量 赋值 false
                                flag = false

                            如果 开关变量存储 不是默认值 也就是存储false
                                触发执行 return 终止之后程序的执行
                                return

            轮播图8     浏览器最小化 
                原因
                    浏览器最小化 或者 浏览器切换 后台运行
                        浏览器最小化 / 显示其他窗口 / 显示执行其他程序
                        都 称为 浏览器 后台运行

                    后台运行的浏览器 浏览器中的程序不会触发执行

                    但是 浏览器中 已经触发的 JavaScript定时器 会 一直触发执行
                    也就是 触发执行的 自动轮播函数中的 定时器 会一直 触发执行
                        自动轮播函数中 
                            index++  
                                会执行

                            setFocusStyle() 
                                会执行

                            move()
                                会执行
                                但是 move() 运动函数 中 触发的定时器程序 不会执行

                    当 浏览器 显示时 
                        也就是 当前 显示执行 当前窗口时 
                        
                        触发的 move() 运动函数 会 一起执行

                也就是 
                    当 浏览器 后台运行时
                        自动轮播函数 会 一直触发执行

                        自动轮播函数 触发的 move() 运动函数中的定时器 
                        会 暂时不执行 存储起来 

                    当 浏览器 显示时
                        存储起来的 move() 运动函数的定时器 会 一起触发执行
                        也就是 多个 定时器 同时触发 都让 ul标签运动 
                        就造成 显示 混乱的效果
                    
                简单理解
                    也就是 一开始 就触发的程序 
                    就算 浏览器 后台运行 JavaScript 程序 也会 一直 执行

                    例如 一开始 就触发的 autoLoop() 
                    浏览器后端运行 也会 一直触发执行

                    autoLoop() 本质上 是 触发生成的 一个 自动轮播定时器
                    就算浏览器后端运行了 自动轮播定时器 也会一直触发执行

                    自动轮播定时器 每次执行 会 触发 
                        执行 index++ 
                        执行 setFocusStyle()
                        执行 move()

                        其中 move() 运动函数 会触发 move运动定时器
                        此时触发的 move运动定时器 是 新触发的异步程序

                        在 浏览器最小化时 触发的生成的新的定时器 
                        在 浏览器最小化时 不会 触发执行 
                        会 先存储到 异步池 中

                        等 浏览器显示时 也就是 浏览器不再是后台运行时 
                        会 触发执行 异步池中 存储的定时器程序

                        当 浏览器 显示时 也就是 浏览器 不是 后台运行了
                        异步池中存储的 move运动定时器 会 同时触发执行

                        多个 move运动定时器 都 设定 ul标签的运动 执行效果就会 报错

                解决方法
                    当 浏览器 后台运行时 
                        清除 自动轮播定时器 
                        不会触发新的 move() 运动函数的调用

                    当 浏览器 显示时 
                        再次调用函数 自动轮播

                    ! 浏览器后台运行 要清除 正在执行的定时器

                程序代码
                    给 document 也就是 这个 html文件 添加 浏览器显示状态监听事件
                        visibilitychange    浏览器显示状态改变时 会 触发

                    document.visibilityState
                        hidden  表示 当前浏览器窗口 在 后台运行
                                也就是 当前显示执行的 不是 这个 浏览器窗口

                            清除自动轮播定时器

                        visible 表示 当前浏览器窗口 显示 
                                也就是 当前显示执行的 就是 这个 浏览器窗口

                            再次调用自动轮播函数
                            生成自动轮播定时器



        */</span>
        

    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>


<span class="token comment">&lt;!--  

            &lt;ul&gt;
                &lt;li&gt;&lt;img src=&quot;https://pics1.baidu.com/feed/e7cd7b899e510fb39f12ffed37c36390d0430cb3.jpeg?token=a785042a78db2261ffe712923d6372f3&amp;s=F708F20B5EF3FFD00A009DAE03006021&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src=&quot;https://img2.baidu.com/it/u=742172290,1417042053&amp;fm=253&amp;fmt=auto?w=600&amp;h=400&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src=&quot;https://gimg2.baidu.com/image_search/src=http%3A%2F%2F03imgmini.eastday.com%2Fmobile%2F20191222%2F20191222192255_e864904989025db1dc40f68e7c439bb4_2.png&amp;refer=http%3A%2F%2F03imgmini.eastday.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1657935977&amp;t=023aebbb222c921caa533c3b7c7ee1ec&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src=&quot;https://img1.baidu.com/it/u=1725616347,3287513527&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=333&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src=&quot;https://pic.rmb.bdstatic.com/5b442fc0f7b3d43b2f4752aa49e56cda.jpeg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
            &lt;/ul&gt;
    

            &lt;ol&gt;
                &lt;li class=&quot;active&quot;&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;
            &lt;/ol&gt;


            &lt;div&gt;
                &lt;a href=&quot;JavaScript:;&quot;&gt;&amp;lt;&lt;/a&gt;
                &lt;a href=&quot;JavaScript:;&quot;&gt;&amp;gt;&lt;/a&gt;
            &lt;/div&gt;




--&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="密码强度" tabindex="-1"><a class="header-anchor" href="#密码强度" aria-hidden="true">#</a> 密码强度</h2><details class="custom-container details"><summary>密码强度 <span class="badge tip" style=""><!--[-->源码<!--]--></span></summary><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">*</span><span class="token punctuation">{</span>
            <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
            <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">span</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
            <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            <span class="token property">line-height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
            <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
            <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">span:nth-of-type(1)</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
            <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">span:nth-of-type(2)</span><span class="token punctuation">{</span>
            <span class="token property">background</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">span:nth-of-type(3)</span><span class="token punctuation">{</span>
            <span class="token property">background</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">span:nth-of-type(4)</span><span class="token punctuation">{</span>
            <span class="token property">background</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    密码: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>英文 数字 下划线 4-14 位<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>不符合<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>弱<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>中<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>强<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>注册<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        

        <span class="token comment">// 获取标签对象</span>
        <span class="token keyword">const</span> oIpt <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;input&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 获取所有的span标签</span>
        <span class="token keyword">const</span> oSpans <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&#39;span&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> oSpans <span class="token punctuation">)</span><span class="token punctuation">;</span>


        <span class="token comment">// 定义好 验证的正则表达式</span>

        <span class="token comment">// 是不是 符合 的正则</span>
        <span class="token comment">// 从 开始 到 结束 只能是 数字 字母 下划线 个数是 4-14</span>
        <span class="token comment">// ! 对 整个内容的验证 需要 边界符</span>
        <span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\w{4,14}$</span><span class="token regex-delimiter">/</span></span> <span class="token punctuation">;</span>

        <span class="token comment">// 定义 对于 数字 字母 下划线 的 单独的验证</span>
        <span class="token comment">// ! 这个验证 是 只要包含就可以 不需要 边界符 </span>
        <span class="token comment">// 如果 单独的验证结果是 true 证明 包含这类内容</span>
        <span class="token comment">// 如果 符合 一个内容的验证 就 给 变量res 累加1 </span>
        <span class="token keyword">let</span> reg1 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d</span><span class="token regex-delimiter">/</span></span> <span class="token punctuation">;</span>
        <span class="token keyword">let</span> reg2 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-zA-Z]</span><span class="token regex-delimiter">/</span></span> <span class="token punctuation">;</span>
        <span class="token keyword">let</span> reg3 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">_</span><span class="token regex-delimiter">/</span></span> <span class="token punctuation">;</span>



        <span class="token comment">// 给input标签 添加 输入事件</span>
        oIpt<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">&#39;input&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 每次输入 都先让 所有的 span标签 都隐藏</span>
            oSpans<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> <span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&#39;none&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> 

            <span class="token comment">// ! 将 变量定义 在 输入事件中 </span>
            <span class="token comment">// 也就是 每次判断 都 重新定义 变量 </span>
            <span class="token comment">// 从 0 开始 重新 执行</span>
            <span class="token comment">// 定义变量 存储 判断结果</span>
            <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span>


            <span class="token comment">// 点击事件 定义的是普通匿名函数 this指向是 事件源 </span>
            <span class="token comment">// 也就是 input标签</span>
            <span class="token keyword">let</span> val <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>

            <span class="token comment">// 判断判断 是不是 符合 内容的规范</span>

            <span class="token comment">// 如果 不符合规范 直接赋值 0</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token operator">!</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span> val <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                res <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span>

            <span class="token comment">// 如果 符合规范 判断 密码强度</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                <span class="token comment">// 如果 结果是 true 证明 包含 这一类的字符</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span> reg1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span> val <span class="token punctuation">)</span> <span class="token punctuation">)</span> res<span class="token operator">++</span> <span class="token punctuation">;</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span> reg2<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span> val <span class="token punctuation">)</span> <span class="token punctuation">)</span> res<span class="token operator">++</span> <span class="token punctuation">;</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span> reg3<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span> val <span class="token punctuation">)</span> <span class="token punctuation">)</span> res<span class="token operator">++</span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

     
            
            <span class="token comment">// 使用 res 变量 作为 索引下标 给 对应的span标签添加css样式</span>
            oSpans<span class="token punctuation">[</span> res <span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&#39;inline-block&#39;</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>


    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token comment">/*
            密码强度设定
                4-14 位 数字 字母 下划线 是 符合 需求的

                如果 有 一种 内容 强度是 弱
                如果 有 两种 内容 强度是 中
                如果 有 三种 内容 强度是 强

            给 input标签 添加 输入事件 
                随着 输入内容 判断 输入的内容 是不是 符合规范和强度
        
                获取 输入的数据 验证 input标签中的内容

                    如果 不符合规范 
                        设定 结果是 0 
                        对应 span标签数值中 索引下标是 0 的 不符合span

                    如果 符合 弱规范 
                        设定 结果是 1 
                        对应 span标签数值中 索引下标是 1 的 弱span

                    如果 符合 中规范 
                        设定 结果是 2 
                        对应 span标签数值中 索引下标是 2 的 中span

                    如果 符合 强规范 
                        设定 结果是 3 
                        对应 span标签数值中 索引下标是 3 的 强span

                    实现方法
                        定义变量 
                            如果 不符合规范 赋值 0
                            如果 有 1种内容 赋值 1
                            如果 有 2种内容 赋值 2
                            如果 有 3种内容 赋值 3

            总结思路

                获取所有的span标签 
                根据 密码强度的结果 
                给变量赋值 数值 
                变量储存的数值 对应 span标签在数组中的索引下标

                定义变量 存储 密码执行结果

                    如果 不符合 密码规范    变量赋值0

                    如果 符合包含数字规范   变量储存数值累加1
                    如果 符合包含字母规范   变量储存数值累加1
                    如果 符合包含下换线规范 变量储存数值累加1
                        使用 累加的方法 比 使用逻辑运算符的方法 更简单

            需要注意的问题
                !   是不是符合密码规范验证 是 对 整个 内容的验证
                    需要 添加 ^ $ 边界符

                !   是不是 包含 数字 字母 下划线 是 只要有就行 
                    不需要 添加 ^ $ 边界符

                !   变量 定义在 input输入事件中 
                    也就是 每次输入内容 都要重新 从 0 开始 验证 密码强度


                    
        
        */</span> 

    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js数组转为树结构" tabindex="-1"><a class="header-anchor" href="#js数组转为树结构" aria-hidden="true">#</a> JS数组转为树结构</h2><blockquote><p>即 JS数组 转化为 tree树形结构; 并且去掉递归后的最后一项 空children</p></blockquote><details class="custom-container details"><summary>JS数组转为树结构 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>JS数组 数据</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span><span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;新世界&quot;</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span> 
    <span class="token punctuation">{</span><span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;梦想城&quot;</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;一栋&quot;</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;1单元&quot;</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;2002&quot;</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;一栋&quot;</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;1单元&quot;</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;3004&quot;</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>转化为 tree树形结构</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// JS数组 转化为 tree树形结构( 递归方法 )</span>
<span class="token function">arrToTree</span><span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> parentId <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>pId <span class="token operator">===</span> parentId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                <span class="token operator">...</span>item<span class="token punctuation">,</span>
                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">arrToTree</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> item<span class="token punctuation">.</span>adrId<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token function">clearAllChildren</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span>
    <span class="token keyword">return</span> newArr
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 递归后 处理最后的一个空children</span>
<span class="token function">clearAllChildren</span><span class="token punctuation">(</span>items<span class="token punctuation">,</span> childrenName <span class="token operator">=</span> <span class="token string">&#39;children&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> item <span class="token operator">=</span> items<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>item <span class="token operator">&amp;&amp;</span> item<span class="token punctuation">[</span>childrenName<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">[</span>childrenName<span class="token punctuation">]</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">delete</span> item<span class="token punctuation">[</span>childrenName<span class="token punctuation">]</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearAllChildren</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span>childrenName<span class="token punctuation">]</span><span class="token punctuation">,</span> childrenName<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>最终得到的数组是这样的</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        <span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> 
        <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> 
        <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;新世界&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
               <span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> 
               <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> 
               <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;一栋&quot;</span><span class="token punctuation">,</span>
               <span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
                    <span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> 
                    <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> 
                    <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;1单元&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
                        <span class="token punctuation">{</span>
                           <span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> 
                           <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> 
                           <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;2002&quot;</span><span class="token punctuation">,</span> 
                        <span class="token comment">// children:[] // 递归后会出现一个空的children  使用上面的 clearAllChildren() 函数去掉它</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">]</span>
               <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> 
    <span class="token punctuation">{</span>
        <span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> 
        <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> 
        <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;梦想城&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
               <span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> 
               <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> 
               <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;一栋&quot;</span><span class="token punctuation">,</span>
               <span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
                    <span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span> 
                    <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> 
                    <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;1单元&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
                        <span class="token punctuation">{</span>
                           <span class="token literal-property property">adrId</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> 
                           <span class="token literal-property property">pId</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> 
                           <span class="token literal-property property">adrName</span><span class="token operator">:</span> <span class="token string">&quot;3004&quot;</span><span class="token punctuation">,</span> 
                        <span class="token comment">// children:[] // 递归后会出现一个空的children  使用上面的 clearAllChildren() 函数去掉它                           </span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">]</span>
               <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="url-的编码和解码" tabindex="-1"><a class="header-anchor" href="#url-的编码和解码" aria-hidden="true">#</a> URL 的编码和解码</h2><details class="custom-container details"><summary>URL 的编码和解码 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">&#39;http://192.168.20.133:9202/tpxt/index.html#/?id=41&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// 编码</span>
<span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span> 

<span class="token comment">// 解码</span>
<span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">作者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: fayuanaini@dingtalk.com">fayuan</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/blogs/assets/app-5598dde8.js" defer></script>
  </body>
</html>
